<template>
  <div class="search">
    <!-- <HeaderIndex :showTwo="false"></HeaderIndex> -->
    <HeaderIndex></HeaderIndex>
    <div class="seek">
      <input
        type="text"
        placeholder="搜电影、搜影院"
        v-model="inputValue"
        @input="onInput"
      />&nbsp;&nbsp;&nbsp;<span class="cancle" @click="fun()">取消</span>
      <img class="searchImg" src="https://dh6.ink/Na5Pv" alt="" />
    </div>
    <div class="main-block" v-for="v in InputList" :key="v.id" @click="$router.push({path:'/xiangqing',query:{sd:v.id}})">
      <div class="main-picture">
        <img :src="v.img | fliterImg" />
      </div>
      <div class="wrap">
        <div class="column">
          <h1 class="title">{{ v.name }}</h1>
          <div class="box-flex">{{ v.en }}</div>
          <div class="score">{{ v.type }}</div>
          <div class="actor">{{ v.showinfo }}</div>
        </div>
      </div>
      <div class="ticket1">
        <div class="ticket">
          <span>{{ v.sc }}</span
          >&nbsp;
          <span>分</span>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
import getdata from "@/api/getdata.js";

export default {
  data() {
    return {
      inputValue: "",
      InputList: [],
      timer:null
    };
  },
  methods: {
    fun() {
      this.$router.push("/home");
    },
    onInput() {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {

        getdata("/apidl/movie/searchMovie",{ giz: this.inputValue}).then(
          (res) => {
            this.InputList = res.data;
          }
        );
      }, 500);
    },
  },
};
</script>

<style scoped>
.main-block {
  padding-left: 0.3rem;
  padding-top: 0.2rem;
  display: flex;
  justify-content: space-between;
  position: relative;
  background: #fff;
}
.main-picture img {
  width: 1.5rem;
  height: 1.87rem;
  padding-bottom: 0.2rem;
}

.wrap {
  width: 4.3rem;
  margin-left: 0.2rem;
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 0.2rem;
}

.column .title {
  font-size: 0.35rem;
  font-weight: 700;
}
.actor {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0.08rem 0;
}

.box-flex {
  color: #8c7e7e;
  margin: 0.1rem 0;
  /* font-weight: 700; */
}
.score {
  color: #8c7e7e;
  /* padding-top: 0.2rem; */
}
.detail {
  color: #666666;
}

.grade {
  color: #faaf00;
  font-size: 0.3rem;
}
.ticket1 {
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 0.2rem;
}
.ticket {
  margin-right: 0.2rem;
  margin-top: 0.4rem;

  /* background: red; */
  width: 1rem;
  height: 0.6rem;
  color: white;
  text-align: center;
  border-radius: 14%;
  line-height: 0.6rem;
  font-size: 0.25rem;
}
.ticket span:nth-of-type(1) {
  color: #faaf00;
  font-size: 0.35rem;
}
.ticket span:nth-of-type(2) {
  color: rgb(209, 204, 204);
  font-size: 0.25rem;
}
.seek {
  width: 100%;
  height: 1rem;
  position: relative;
}
input {
  width: 80%;
  height: 0.55rem;
  margin-top: 0.25rem;
  margin-left: 0.2rem;
  border-radius: 5%;
  text-indent: 0.6rem;
}
.searchImg{
  width: 0.3rem;
  height: 0.3rem;
  position: absolute;
  left: 4%;
  top: 35%;
}
.cancle {
  color: red;
  font-size: 0.3rem;
}
</style>